<template>
  <Back></Back>
  <div style="margin-top: 50px">
    <vue3-tinymce v-model="content" :setting="state.setting" :init="init" />
  </div>
  <div
    style="
      width: 100%;
      background: #fff;
      min-height: 50px;
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
    "
  >
    <div class="card">
      <div style="width: 90px; text-align: center; color: #676767">标签</div>
      <div style="width: 70%; display: flex; flex-wrap: wrap">
        <div
          v-for="tag of tagList"
          :key="tag.id"
          class="tag"
          @click="selectTag(tag.id)"
          :class="{ active: tags.indexOf(tag.id) === -1 ? false : true }"
        >
          {{ tag.name }}
        </div>
      </div>
    </div>
    <el-button @click="submit" style="margin-right: 20px">提交</el-button>
  </div>

  <Forbidden ref="forbidden" @submit-content="handlerConfirm"> </Forbidden>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce'
import Back from '@/components/client/Back.vue'
import request from '@/util/request'
import { ElNotification } from 'element-plus'
import Forbidden from '@/components/client/community/Forbidden.vue'

const content = ref('')
const forbidden = ref()
const tags = ref([])
const tagList = ref([])

const state = reactive({
  // editor 配置项
  setting: {
    height: 400, // editor 高度
    language: 'zh-Hans',
    language_url: 'https://unpkg.com/@jsdawn/vue3-tinymce@2.0.2/dist/tinymce/langs/zh-Hans.js'
  }
})

const handlerConfirm = () => {
  var form = {
    content: content.value,
    tags: tags.value
  }
  request
    .post('/user/community/insert', form)
    .then((res) => {
      console.log('获取成功：', res)
      ElNotification.success('发布成功等待审核')
      content.value = ''
      tags.value = []
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const init = reactive({
  selector: 'textarea', // change this value according to your HTML
  placeholder: 'Hello WOrld...',
  highlight_on_focus: true,
  advcode_inline: true,
  plugins: ['fullscreen', 'advcode'],
  toolbar: 'code',
  setup: function (editor) {
    editor.on('blur', function (e) {
      console.log('编辑器已失去焦点', e)
      // 在这里添加你的代码
    })
  }
})
const submit = () => {
  var form = {
    content: content.value,
    tags: tags.value
  }
  console.log(content)
  request
    .post('/user/community/forbidden', form)
    .then((res) => {
      console.log('获取成功：', res)
      forbidden.value.open(res.data)
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const getTag = () => {
  request
    .get('/user/tag/list')
    .then((res) => {
      tagList.value = res.data
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const selectTag = (id) => {
  if (tags.value.indexOf(id) === -1) {
    tags.value.push(id)
  } else {
    tags.value.splice(tags.value.indexOf(id), 1)
  }
}

onMounted(() => {
  getTag()
})
</script>

<style scoped>
.card {
  width: 80%;
  background: #eee;
  padding: 20px;
  margin-left: 30px;
  display: flex;
}
.tag {
  width: fit-content;
  padding: 3px 10px;
  margin-right: 10px;
  border: 1px #969696 solid;
  border-radius: 3px;
  color: #676767;
  font-size: 14px;
}
.tag:hover {
  cursor: pointer;
  border: #ff6200 1px solid;
  color: #ff6200;
}

.active {
  border: #ff6200 1px solid;
  color: #ff6200;
}
</style>
